import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Image  } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import './foodDetail.scss'

// 引入数据
import data from '../../http/mock'

// 子组件
import TopBar from '../../component/index/topBar/index'

export default class Cart extends Component {

  constructor (props) {
    super(props)
    this.state = {
      food: ''
    }
  }
  componentWillMount () { }

  componentDidMount () {
    let id = this.$router.params.id || 12
    this.setState({
      food: data.foodDetail[id]
    }, () => {
      console.log(this.state.food.title)
      Taro.setNavigationBarTitle({
        title: this.state.food.title
      })
    })
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    const showTopBar = process.env.TARO_ENV === 'h5'
    const imgList =  this.state.food && this.state.food.imgSrc.split(',')
    console.log(imgList)
    return (
      <View className='foodDetail'>
        {showTopBar ? <TopBar text={this.state.food && this.state.food.title} />: null}
         <Swiper
           indicatorColor='#999'
           indicatorActiveColor='#d40073'
           vertical={false}
           circular
           indicatorDots
           className='detail_swiper'
           autoplay>
            {
              imgList && imgList.map((item, index) =>
                <SwiperItem key={index}>
                    <Image className='taro-img' mode='scaleToFill' src={item}  />
                </SwiperItem>
              )
            }
          </Swiper>
        <View className='food_info'>
          <View className='food_title'>{this.state.food && this.state.food.title}</View>
          <View className='food_price'>
            <Text className='money_logo'>￥</Text><Text  className='discount_money'>{this.state.food && this.state.food.discountPrice}</Text>
            <Text className='original_money'>￥{this.state.food && this.state.food.originalPrice}</Text>
          </View>
        </View>

        <View className='food_footer'>
          <View className='food_item store'>
            <View className='v_middle'>
              <AtIcon value='clock' size='20' color='#F00'></AtIcon>
              收藏
            </View>
          </View>
          <View className='food_item cart'>
            <View className='v_middle'>
              <AtIcon value='clock' size='20' color='#F00'></AtIcon>
              购物车
            </View>
          </View>
          <View className='food_item right_item add_cart'>
            <View className='v_middle'>加入购物车</View>
          </View>
          <View className='food_item right_item buy'>
            <View className='v_middle'>立即购买</View>
          </View>
        </View>
      </View>
    )
  }
}

